<div class="container py-5">

  <div class="row justify-content-center">
    <div class="col">
      <div class="row">
        <div class="col">
          <div class="d-flex">
            <div class="d-flex me-auto">
              <input #selectedField type="text" class="form-control me-2" id="searchField" name="searchField"
                (keydown)="onHandleKeyDown($event)" [(ngModel)]="searchField" placeholder="news ...">
              <button type="button" class="btn nga-btn-primary btn-sm nga-btn" (click)="onSearch()"><i
                  class="fa fa-search"></i></button>
            </div>
            <div class="d-flex me-auto d-none d-md-block">
              <div class=" pt-2 ml-4">
                <b>
                  <span style="color:gray;">7 Movies</span>
                </b>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div *ngIf="loaded" class="row pt-4">
        <div *ngFor="let item of items; let i=index;" class="col-6 col-sm-6 col-md-4 col-lg-3 col-xl-3 px-2 mb-3">
          <div class="nga-card-movie">
            <div class="row">
              <div class="col">
                <div class="card-movie-img">
                  <a (click)="openTrailer(item)" (keydown)="openTrailer(item)" tabindex="1">
                    <img src="https://img.youtube.com/vi/{{ item.youtubeLink }}/mqdefault.jpg"
                      class="img-fluid rounded z-depth-2" alt="youtube_image">
                  </a>
                  <div class="nga-player" (click)="openTrailer(item)" (keydown)="openTrailer(item)" tabindex="1">
                    <img src="./assets/params/images/icons/play-60-60.png" alt="text_image">
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <div class="card-movie-text">
                  <a class="waves-effect" (click)="openTrailer(item)" (keydown)="openTrailer(item)" tabindex="1">
                    <i class=" {{ item.category | category }} me-1"></i>
                    <span>{{ item.name}}</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div *ngIf="loaded" class="row mb-2">
        <div class="d-flex justify-content-center mt-4">
          <nav aria-label="...">
            <ul class="pagination pagination-sm">
              <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">&laquo;</a>
              </li>
              <li class="page-item"><a class="page-link" href="#">1</a></li>
              <li class="page-item"><a class="page-link" href="#">...</a></li>
              <li class="page-item d-none d-sm-block"><a class="page-link" href="#">11</a></li>
              <li class="page-item active" aria-current="page">
                <a class="page-link" href="#">12</a>
              </li>
              <li class="page-item d-none d-sm-block"><a class="page-link" href="#">13</a></li>
              <li class="page-item"><a class="page-link" href="#">...</a></li>
              <li class="page-item"><a class="page-link" href="#">50</a></li>
              <li class="page-item">
                <a class="page-link" href="#">&raquo;</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
  <section>
    <div class="modal fade" id="newsModal" role="dialog" tabindex="-1" aria-labelledby="youtube Player"
      aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header clearfix d-block d-sm-none d-flex justify-content-center">
            <button type="button" class="btn btn-sm btn-outline-primary btn-rounded btn-md ml-4"
              data-bs-dismiss="modal">
              <strong>Close</strong>
            </button>
          </div>
          <div class="modal-body">
            <div *ngIf="playerLoaded" class="nga-embed nga-embed-youtube nga-z-depth">
              <iframe class="nga-embed-item" [src]="('https://www.youtube.com/embed/' + player ) | safe"
                allowfullscreen></iframe>
            </div>
          </div>
          <div class="modal-footer justify-content-center">
            <button type="button"
              class="clearfix d-none d-sm-inline-block d-md-inline-block d-lg-inline-block d-xl-inline-block btn btn-outline-primary btn-sm btn-rounded btn-md"
              data-bs-dismiss="modal"><strong>Close</strong></button>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>